<template>
  <div>
    <!--<transition name="fade">-->
      <div class="bottomShow" :class="{'addbottomShow' : showBottom}" >
        <i @click="goTop" class="iconTop"></i>
      </div>
    <!--</transition>-->
  </div>
</template>
<script>
export default{
  props:{
    showBottom:{
      type:Boolean,
      default:false
    }
  },
  methods:{
    goTop(){
    //  document.documentElement.scrollTop=0;//pc 上有效果；
     // document.body.scrollTop=0;//手机上有效果；
      if (this.showBottom) {
        //document.documentElement.scrollTop = 0;
        this.gotoTop(4);
      }
    },
    //平滑返回顶部
    gotoTop(rate) {

      if (!window.requestAnimationFrame) {
        requestAnimationFrame = function (fn) {
          setTimeout(fn, 17);
        };
      }

      let doc = document.body.scrollTop ? document.body : document.documentElement;
      let scrollTop = doc.scrollTop;
      let top = function () {
        scrollTop = scrollTop + (0 - scrollTop) / (rate || 2);
        if (scrollTop < 1) {
          doc.scrollTop = 0;
          return false;
        }
        doc.scrollTop = scrollTop;
        stop = requestAnimationFrame(top);
      };
      top();
    }
  }
}
</script>
<style lang="less" scoped>
  .bottomShow{
    position: fixed;
    bottom: -121px;
    right: 14px;
    width: 60px;
    text-align: center;
    z-index: 200;
    transition: all 1.5s;
    &.addbottomShow{
      //transform: translateY(-180px);
      transform: translateY(-200px)
    }
    .iconTop{
      display: inline-block;
      width: 38px;
      height: 38px;
      background-position: 0px -38px;
      vertical-align: middle;
      background-image: url(../../static/img/toTop.png);
      background-repeat: no-repeat;
      background-size: 38px auto;
    }
  }
</style>
